<template>
    <section>
      <div class="body">
      <!--工具条-->
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple" style="height: 50px">
            <el-button type="primary" icon="el-icon-refresh" class="refresh" @click="reloadnow">刷新</el-button>
            <el-button type="primary" icon="el-icon-circle-plus-outline" class="add" @click="Addit">添加</el-button>
            <el-form :inline="true" :model="filters">
              <el-form-item>
                <el-input v-model="filters.keyword" class="input1" placeholder="请输入参数名称" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchit" class="search" icon="el-icon-search">查询
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>

      <!--列表-->
      <div class="table">
      <el-table
        :data="datalist"
        border highlight-current-row v-loading="listLoading"
        style="width: 100%">
        <el-table-column label="参数名称" prop="propertyname"></el-table-column>
        <el-table-column label="参数含义" prop="meaning"></el-table-column>
        <el-table-column label="参数值" prop="propertyvalue"></el-table-column>
        <el-table-column  label="操作" prop="dataList">
          <template slot-scope="scope">
            <el-button size="mini" @click="Editit(scope.$index, scope.row)" icon="el-icon-edit" >编辑</el-button>
            <el-button size="mini" @click="Deleteit(scope.$index,scope.row)" icon="el-icon-edit" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </div>

      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination layout="total, sizes, prev, pager, next, jumper"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :page-sizes="pageSizes"
                       :page-size="pageSize" :total="total" style="float:right;">
        </el-pagination>
      </el-col>
      </div>
      <!--新增/编辑参数页面-->
      <el-dialog :title="formTitle" :visible.sync="formVisible" :close-on-click-modal="false">
        <el-form :model=" formdata" label-width="80px"  :rules="formRules"ref="datalist" >
          <el-form-item label="参数名称" prop="propertyname">
            <el-input v-model="formdata.propertyname"></el-input>
          </el-form-item>
          <el-form-item label="参数含义" prop="meaning">
            <el-input v-model="formdata.meaning"></el-input>
          </el-form-item>
          <el-form-item label="参数值" prop="propertyvalue">
            <el-input v-model="formdata.propertyvalue"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="formVisible= false">取消</el-button>
          <el-button type="primary" v-on:click="SaveSubmit" :loading="submitLoading">保存</el-button>
        </div>
      </el-dialog>


    </section>
</template>

<script>
  import API from '@/api'
    export default {
        inject:['reload'],//注入依赖
        name: "paramSetting",
        data(){
          return{
            datalist:[],
            formdata:{
              id:'',
              meaning:'',
              propertyname:'',
              propertyvalue:'',
            },
            filters:{
              keyword:''
            },
            listLoading: false, //是否显示加载动画
            submitLoading: false,
            // 分页数据列表--start
            total: 0,
            pageIndex: 1, //页码
            pageSize: this.CONSTANT.PAGE_SIZE, //分页大小
            pageSizes: this.CONSTANT.PAGE_SIZES, //分页大小选择列表

            // 分页数据列表--end
            action: '', // 'add'-添加，'edit'-编辑,'search'-查找
            claimVisible:false,
            formVisible:false,
            formTitle: '', //界面标题
            formRules:{
              propertyname:[
                {required:true,message:'请输入参数名称',trigger:'blue'}
              ],
              meaning:[
                {required:true,message:'请输入参数含义',trigger:'blue'}
              ],
              propertyvalue:[
                {required:true,message:'请输入参数值',trigger:'blue'}
              ]
            },
          }
        },
      methods:{
        reloadnow:function () {
          this.reload()
        },//刷新
          //分页
        handleSizeChange(val) { //改变分页大小
          this.pageSize = val;
          this.getsysInfo();
        },
        handleCurrentChange(val) { //页码跳转
          this.pageIndex = val;
          this.getsysInfo();
        },
        getsysInfo:function () {//获取系统配置参数
          if(this.action=='search'){
            this.listLoading = true;
            API.sysInfo.findOneByPropertyName(this.filters.keyword).then((res)=>{
              this.listLoading = false;
              this.datalist=res.data.data;
              console.log(res.data);
            }).catch(error=>{
              this.listLoading = false;
              console.log(error);
            });
            this.action='';
          }
          else{
            this.listLoading = true;
            let para={
              pageIndex: this.pageIndex,
              pageSize: this.pageSize,
            };
            API.sysInfo.findBachByCondition(para).then((res)=>{
              this.listLoading = false;
              this.total=res.data.total;
              this.datalist=res.data.data;
              // console.log(this.datalist);
            }).catch(error=>{
              this.listLoading = false;
              console.log(error);
            });
          }
        },
        Editit:function (index,row) {
          this.formVisible=true;
          this.formdata.propertyname=row.propertyname;
          this.formdata.propertyvalue=row.propertyvalue;
          this.formdata.meaning=row.meaning;
          this.formdata.id=row.id;
          this.action="edit";
          this.formTitle='编辑参数';
        },
        Deleteit:function (index,row) {
          this.$confirm('确认删除该记录吗?', '提示', {
            type: 'warning'
          }).then(() => {
            // console.log(row.id);
            API.sysInfo.removeOneById(row.id).then((res) => {
              if (res.data.code == 0) {
                this.$message({
                  message: '删除成功',
                  type: 'success'
                });
              } else {
                this.$message({
                  message: '删除失败',
                  type: 'error'
                });
              }
              this.getsysInfo();
            });
          }).catch(() => {
            if (error) console.log(error);
          });
        },
        Addit:function () {
          this.formVisible=true;
          this.formdata={
            propertyname:'',
            meaning:'',
            propertyvalue:'',
            id:'',
          };
          this.action="add";
          this.formTitle='新增参数';
        },
        searchit:function () {
          this.action='search';
          this.getsysInfo();
        },
        SaveSubmit:function () {//保存
          if(this.action=='add'){
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.submitLoading = true;
              // console.log(para);

              API.sysInfo.addOne(this.formdata).then(res => {
                this.submitLoading = false;

                if (res.data.code == 0) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  // this.$refs['formdata1'].resetFields();
                  this.formVisible = false;
                  this.getsysInfo(); //重新加载数据
                } else {
                  this.$message({
                    message: '提交失败',
                    type: 'error'
                  });
                }
              }).catch((error) => {
                this.submitLoading = false;
                if (error) console.log(error);
              });
            });
          }
          else if(this.action=='edit'){
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.submitLoading = true;
              // console.log(this.formdata);
              API.sysInfo.modifyOneById(this.formdata).then(res => {
                this.submitLoading = false;

                if (res.data.code == 0) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  // this.$refs['formdata1'].resetFields();
                  this.formVisible = false;
                  this.getsysInfo(); //重新加载数据
                } else {
                  this.$message({
                    message: '提交失败',
                    type: 'error'
                  });
                }
              }).catch((error) => {
                this.submitLoading = false;
                if (error) console.log(error);
              });
            });
          }
        }
      },
      mounted(){
        this.getsysInfo();
      }
    }
</script>

<style scoped>
  .body{
    text-align: right;
  }
  .table{
    text-align: center;
  }
  .el-row {
    margin-top: -10px;
    margin-bottom: 10px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .refresh{
    float: left;
    margin:7px 5px 0px 5px;
    height: 35px;
    width: 85px;
  }
  .add{
    float: left;
    margin:7px 5px 0px 5px;
    height: 35px;
    width: 85px;
  }
  .input1{
    float: right;
    margin:7px 5px 0px 5px;
    height: 34px;
    width: 200px;
  }
  .search{
    float: right;
    margin:7px 5px 0px 5px;
    height: 35px;
    width: 85px;
  }
</style>
